<template>
	<view class="detailsPage">
		<view class="settlement-box">
			<view class="settlement-item">
				<view class="address-head flex-row-btw">
					<view class="address-Letf" @click="handleswitch">
						<view class="address-name color-333 size-16 weight-600 ">
							<view class="">小张</view>
							<view class="">152350464455</view>
						</view>
						<view class="m-t-6 color-999 size-15">收货地址：重庆市江北区建兴北路1899号</view>
					</view>
					<view class="address-right ">
						<image src="../../static/icon/icon-zjt.png" mode=""></image>
					</view>
				</view>
			</view>
			<div class="Marker">
				<div v-for="(item, index) in 17" :key="index" :class="index % 2 === 0 ? 'blue' : 'red'"></div>
			</div>
		</view>
		<!-- 商品列表 -->
		<view class="Product-List">
			<view class="Product-item" v-for="item in 4">
				<view class="Product-left">
					<view class="Product-img">
						<image src="https://crazy3.top/images/avatar/狂三.png" mode="widthFix" class="border-10"></image>
					</view>
					<view class="left-item">
						<view class="size-16 size-bold color-333 noWrap">珠宝黄金玉珠宝黄金玉珠宝黄金玉珠宝黄金玉</view>
						<view class="size-14 color-666 zi-hide-2">珠宝黄介绍珠宝</view>
						<view class="size-bold color-e9 size-14 ">￥5000</view>
					</view>
				</view>
				<view class="Product-right size-14 color-666">
					x10
				</view>
			</view>
		</view>
		<!--结算栏 -->
		<view class="settlement">
			<view class="settlement-item-money">
				<view class="size-16 color-333">结算金额：</view>
				<view class="size-14   color-e9">￥5000</view>
			</view>
			<view class="settlement-btn">去付款</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onLoad() {
			// 处理选中地址逻辑
			uni.$on('addressSelected', (item) => {
				
			});
		},
		methods: {
			handleswitch() {
				uni.navigateTo({
					url: "/pages/me/MyAddress/MyAddress?fromSpecial=1"
				})
			}
		}
	}
</script>

<style lang="less">
	.detailsPage {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.settlement-box {
		width: 100%;
		background: #fff;

		.settlement-item {
			padding: 20rpx;
			box-sizing: border-box;

			.address-head {
				height: 100%;
				margin: 20rpx 0rpx;

				.address-Letf {
					width: 90%;

					.address-name {
						display: flex;
						gap: 20rpx;
					}
				}

				.address-right {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 26rpx;
						height: 36rpx;
					}
				}
			}
		}

		.Marker {
			display: flex;
			gap: 4rpx;

			.blue {
				width: 40rpx;
				height: 8rpx;
				background-color: #45B2E3;
			}

			.red {
				width: 40rpx;
				height: 8rpx;
				background-color: #EB6A31;
			}
		}
	}

	.Product-List {
		width: 100%;
		margin-top: 30rpx;
		margin-bottom: calc(40px + env(safe-area-inset-bottom));
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.Product-item {
			width: 100%;
			padding: 20rpx 0rpx;
			display: flex;
			border-bottom: 1px solid #eeeeee;

			.Product-left {
				width: 80%;
				display: flex;
				align-items: center;
				gap: 20rpx;

				.Product-img {
					width: 140rpx;
					height: 140rpx;

					image {
						width: 100%;
						height: 100%;
					}

				}

				.left-item {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					gap: 10rpx;
					min-width: 0;
				}
			}

			.Product-right {
				flex: 1;
				display: flex;
				justify-content: flex-end;




			}

		}
	}

	.settlement {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		background-color: #fff;
		box-shadow: 0 -10px 15px -5px rgba(0, 0, 0, 0.1);

		.settlement-item-money {
			flex: 1;
			display: flex;
			align-items: center;
		}

		.settlement-btn {
			width: 20%;

			background-color: #32B9B3;
			color: white;
			padding: 0 30rpx;
			border-radius: 40rpx;
			line-height: 60rpx;
			text-align: center;
			height: 60rpx;
			font-size: 26rpx;
		}
	}
</style>